<template>
  <div class="banner">
    <div class="common">
      <div class="common-button" @click="addHit">新增</div>
    </div>

    <div class="table" v-loading="loading">
      <el-table :data="tableData" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column label="banner图片" align="center" width="250">
          <template slot-scope="scope">
            <div @click="bannerHit(scope.row.bannerImage)">
              <el-image class="banner-img" :src="scope.row.bannerImage" :preview-src-list="srcList0"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="跳转页面" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.bannerProperty == 0">无跳转</div>
            <div v-if="scope.row.bannerProperty == 1">
              pages/province/autotrophyDetails?id={{ scope.row.otherId }}
            </div>
            <div v-if="scope.row.bannerProperty == 2">{{ scope.row.url }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="250">
        </el-table-column>
        <el-table-column label="排序" align="center" width="250">
          <template slot-scope="scope">
            <div class="parallel">
              <i style="
                  width: 40px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 22px;
                  font-weight: bold;
                  color: #2a82e4;
                " class="el-icon-top" size="20" @click="topClick(1, scope.row)"></i>
              <div class="lint"></div>
              <i style="
                  width: 40px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 22px;
                  font-weight: bold;
                  color: #2a82e4;
                " class="el-icon-bottom" @click="topClick(0, scope.row)"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="detailsHit(scope.row)">
                详情
              </div>

              <div class="list" @click.prevent="editHit(scope.row)">编辑</div>

              <div class="list" @click.prevent="deleteHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  commonAdvertisingList,
  commonAdvertisingListIdPut,
  commonAdvertisingListDelete,
} from "@/api/common";

export default {
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      deleteVisible: false,
      loading: false,
      //-------
      srcList0: [],
      bannerObj: {},
    };
  },
  created() {
    this.loading = true;
    this.commonAdvertisingListMet();
  },
  methods: {
    commonAdvertisingListMet() {
      let params = {
        bannerType: 3,
        pageSize: this.limit,
        pageNo: this.page,
      };

      commonAdvertisingList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.bannerList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    //-------------------
    topClick(index, item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      let params = {
        bannerId: item.bannerId,
        sortType: index,
      };

      commonAdvertisingListIdPut(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("排序成功！");

          this.loading = true;
          this.commonAdvertisingListMet();
        }
      });
    },
    //------
    detailsHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.$router.push({
        path: "/save/banner/banner-list-details",
        query: {
          id: item.bannerId,
          soucre: 1,
        },
      });
    },

    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.bannerObj = item;
      this.deleteVisible = true;
    },
    //-----------
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.bannerObj.bannerId;

      commonAdvertisingListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.commonAdvertisingListMet();
        }
      });
    },
    //-------
    addHit() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.$router.push({
        path: "/save/banner/banner-list-details",
        query: {
          soucre: 0,
        },
      });
    },
    editHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.$router.push({
        path: "/save/banner/banner-list-details",
        query: {
          id: item.bannerId,
          soucre: 0,
        },
      });
    },

    //--------------
    bannerHit(item) {
      this.srcList0 = [item];
    },

    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.commonAdvertisingListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.commonAdvertisingListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/delete.less");

.banner {
  .common {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .table {
    cursor: pointer;

    .operation {
      display: flex;
      align-items: center;
      color: #2a82e4;

      .list {
        margin-right: 20px;
        cursor: pointer;
      }
    }

    .parallel {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;

      .lint {
        width: 1px;
        height: 20px;
        background: #ccc;
      }
    }

    .banner-img {
      width: 150px;
      height: 80px;
    }
  }
}
</style>